<template>
  <div class="ListDetails">
    <van-sticky>
      <div class="header">
        <div class="row">
          <div class="left" @click="$router.push('/Home')">
            <van-icon name="wap-home-o" size="35" />
          </div>
          <h1>网易严选</h1>
          <div class="right">
            <van-icon name="search" @click="$router.push('/Search')" size="35" />
            <van-icon name="cart-circle-o" @click="$router.push('/ShopCart')" size="35" />
          </div>
        </div>
      </div>
      <div class="ItemNav">
        <van-tabs v-model:active="active" @click-tab="change(active)">
          <van-tab v-for="item in set" :key="item.id" :name="item.name" :title="item.name"></van-tab>
        </van-tabs>
      </div>
    </van-sticky>


    <div class="main-item">
      <div class="item-div"></div>
      <div class="H-header">
        <p>{{ list.category?.frontName }}</p>
      </div>
      <div class="itemList">
        <div class="item-image" v-for="Details in list.itemList" :key="Details.id">
          <img :src="Details.listPicUrl" @click="$router.push('/Detail')" alt="">
          <div class="name">
            <img class="preLogo" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""
              style="height: 15px; width: 15px; vertical-align: -3PX;">
            <span style="font-size:14px">{{ Details.name }}</span><br>
            <span style="color:red; font-size:20px; font-weight: bold;">￥{{ Details.retailPrice }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 回到顶部 -->
    <van-back-top bottom="60px" />
  </div>
</template>

<script lang="ts" setup>
import { GetCategoryListDetails } from '@/api/category';
import { onMounted, ref, nextTick } from 'vue';
import { useRoute } from 'vue-router';

let route = useRoute();

const active = ref<any>([]);

const set = ref<any>([]);

const list = ref<any>([])

let id1 = ref<any>(route.query.ID1);
let id2 = ref<any>(route.query.id);

let change = async (active: any) => {
  let categoryFilter = set.value.filter((item: any) => {
    return item.name == active
  })

  // console.log(categoryFilter[0].id);
  let result = await GetCategoryListDetails(id1.value, categoryFilter[0].id);
  let categoryList = result.data.categoryItems

  list.value = categoryList
  id2.value = categoryFilter[0].id

}

let ListDetailsInfo = async (id1: any, id2: any) => {
  let result = await GetCategoryListDetails(id1.value, id2.value);

  let categoryDetails = result.data.categoryL2List

  let categoryList = result.data.categoryItems

  // console.log(categoryList);

  set.value = categoryDetails

  list.value = categoryList

}

onMounted(async () => {
  ListDetailsInfo(id1, id2);

  await nextTick(() => {
    active.value = route.query.cname; //id.value

  })

  // console.log(route.query, 1111111111111);

});
</script>

<style lang="less" scoped>
.ListDetails {
  width: 100%;
  height: 100%;
  background-color: #ccc;

  .header {

    // position: fixed;
    // z-index: 100;
    // width: 100vw;

    .row {
      display: flex;
      justify-content: space-between;
      background-color: #FAFAFA;
      height: 30px;
      border-bottom: 1px solid #ccc;
      padding: 10px;


      h1 {
        margin: auto;
        margin-left: 95px;
      }

    }
  }

  .ItemNav {
    // position: fixed;
    z-index: 200;
    // top: 52px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #ccc;
  }

  .main-item {
    background-color: #FAFAFA;

    .item-div {
      height: 20px;
      background-color: #ccc;
    }

    .H-header {
      height: 70px;
      line-height: 45px;
      text-align: center;
      font-size: 15px;

    }

    .itemList {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0 10px;

      .item-image {
        width: 172px;
        height: 260px;

        // margin: 0 10px;
        img {
          width: 172px;
          height: 172px;
          border-radius: 10px;

          .name {
            display: flex;
            vertical-align: auto;
          }
        }
      }
    }
  }
}
</style>